<template>
  <div>
    <!-- 查找 -->
    <template>
      <el-tag effect="plain">查找信息</el-tag>
      <el-select v-model="value" placeholder="请选择字段">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="keywords"
        placeholder="请输入关键字"
        width="100"
      ></el-input>
      <el-button type="primary" round icon="el-icon-search" @click="searchMsg()"
        >搜索</el-button
      >
    </template>

    <!-- 表格显示 -->
    <el-table border style="width: 100%" :data="userInfos">
      <!-- prop 代表 tableData 里面的对象 -->
      <el-table-column prop="id" label="序号" width="60"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="50"> </el-table-column>
      <el-table-column prop="department" label="在职部门" width="80">
      </el-table-column>
      <el-table-column prop="position" label="在职职位" width="80">
      </el-table-column>
      <el-table-column prop="date" label="入职日期"> </el-table-column>
      <el-table-column prop="tel" label="联系电话"> </el-table-column>
      <el-table-column prop="email" label="电子邮件"> </el-table-column>
      <el-table-column prop="address" label="家庭地址"> </el-table-column>
      <!-- 由于我们的状态是一个 switch 开关，可选的，所有需要用 slot 插槽 -->
      <el-table-column prop="status" label="在职状态" width="80">
        <!-- scope 变量代表当前的这行记录信息 -->
        <template slot-scope="scope">
          <el-switch
            @change="switchChangeHandler(scope)"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="" label="信息操作">
        <template slot-scope="scope">
          <el-button
            :disabled="!scope.row.status"
            @click="setEditId(scope), (dialogFormVisible = true)"
            type="primary"
            icon="el-icon-edit"
            circle
            style="margin-right: 10px"
          ></el-button>
          <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio-group
                  v-model="form.sex"
                  size="medium"
                  autocomplete="off"
                >
                  <el-radio border label="男"></el-radio>
                  <el-radio border label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="在职部门" :label-width="formLabelWidth">
                <el-select v-model="form.department" autocomplete="off">
                  <div v-for="ele in depart">
                    <el-option :label="ele" :value="ele"></el-option>
                  </div>
                </el-select>
              </el-form-item>
              <el-form-item label="在职职位" :label-width="formLabelWidth">
                <el-radio-group
                  v-model="form.position"
                  size="medium"
                  autocomplete="off"
                >
                  <el-radio border label="普通员工"></el-radio>
                  <el-radio border label="项目组长"></el-radio>
                  <el-radio border label="产品经理"></el-radio>
                  <el-radio border label="部门经理"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="入职日期" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="form.date"
                  autocomplete="off"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input
                  type="tel"
                  v-model="form.tel"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱" :label-width="formLabelWidth">
                <el-input
                  type="email"
                  v-model="form.email"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="editHandler(), (dialogFormVisible = false)"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <el-button
            :disabled="!scope.row.status"
            @click="deleteHandler(scope)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示分页 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="limit"
      layout="prev, pager, next"
      :total="counter"
    >
    </el-pagination>
  </div>
</template>

<script>
/* 调用接口，请求用户列表数据 */
import {
  getUserList,
  deleteUser,
  updateStatus,
  updateMsg,
  getUserListCounter,
  findeUserMsg,
} from "../api/staff.js";
import moment from "moment";
import { mapState } from "vuex";
import { validEmail, validTel } from "../util/validate.js";
export default {
  name: "Admin-staff-list",
  computed: {
    ...mapState(["depart"]),
  },
  async created() {
    this.counter = (await getUserListCounter()).data.length;
    // console.log("总条数：", this.counter);
    this.getUsers();
  },
  methods: {
    async getUsers() {
      // 这个里面调用接口
      const infos = await getUserList({ page: 1, limit: this.limit });
      // console.log("infos", infos);
      this.userInfos = infos.data;
    },
    async handleCurrentChange(page) {
      // console.log("handleCurrentChange", page);
      this.page = page;
      const infos = await getUserList({ page, limit: this.limit });
      this.userInfos = infos.data;
    },
    async switchChangeHandler(scope) {
      // console.log("scope", scope);
      // console.log("status---", scope.row.status);
      // 发送网络请求，根据 scope.roe.status 里面的值修改调用接口用户的状态
      await updateStatus(scope.row.id, scope.row.status);
      const infos = await getUserList({ page: this.page, limit: this.limit });
      this.userInfos = infos.data;
    },
    setEditId(scope) {
      this.editId = scope.row.id;
    },
    async editHandler() {
      // console.log(this.editId);
      if (this.form.date) {
        this.form.date = moment(this.form.date).format("YYYY-MM-DD");
      }
      /* 验证手机格式是否正确 */
      if (this.form.tel) {
        if (!validTel(this.form.tel)) {
          swal("电话号码不正确!", "请填写正确的电话号码!", "error");
          return;
        }
      }
      /* 验证邮箱格式是否正确 */
      if (this.form.email) {
        if (!validEmail(this.form.email)) {
          swal("邮箱地址不正确!", "请填写正确的邮箱地址!", "error");
          return;
        }
      }
      // console.log("form", this.form);
      await updateMsg(
        this.editId,
        this.form.name,
        this.form.sex,
        this.form.department,
        this.form.position,
        this.form.date,
        this.form.tel,
        this.form.email,
        this.form.address
      );
      const infos = await getUserList({ page: this.page, limit: 2 });
      this.userInfos = infos.data;
      if (this.value != "null" && this.value) {
        this.searchMsg();
      }
    },
    async deleteHandler(scope) {
      // console.log("delete-scope", scope.row.id);
      await deleteUser(scope.row.id);
      const infos = await getUserList({ page: this.page, limit: 2 });
      this.userInfos = infos.data;
      if (this.value != "null" && this.value) {
        this.searchMsg();
      }
    },
    async searchMsg() {
      if (this.value != "null" && this.value) {
        const infos = await findeUserMsg(this.value, this.keywords);
        this.counter = infos.data.length;
        this.limit = infos.data.length;
        this.userInfos = infos.data;
      } else {
        this.limit = 2;
        this.counter = (await getUserListCounter()).data.length;
        this.getUsers();
      }
    },
  },
  data() {
    return {
      counter: 0,
      page: 1,
      limit: 2,
      userInfos: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        sex: "",
        department: "",
        position: "",
        date: "",
        tel: "",
        email: "",
        address: "",
      },
      editId: 0,
      formLabelWidth: "120px",
      options: [
        { value: "name", label: "姓名" },
        { value: "sex", label: "性别" },
        { value: "department", label: "在职部门" },
        { value: "position", label: "在职职位" },
        { value: "date", label: "入职日期" },
        { value: "tel", label: "联系电话" },
        { value: "email", label: "电子邮件" },
        { value: "address", label: "家庭地址" },
        { value: "status", label: "在职状态" },
        { value: "null", label: "---无---" },
      ],
      /* 搜索字段 */
      value: "",
      /* 搜索关键字 */
      keywords: "",
    };
  },
};
</script>

<style scoped lang="less">
.el-radio--medium.is-bordered {
  margin: 10px;
}
.el-input {
  margin: 0 10px;
  width: 260px;
}
.el-tag--plain {
  margin-right: 10px;
}
</style>